import React, { useState, useEffect } from 'react'
import { NavBar, Toast, Button } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { QRCode } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { addTrack } from '../../store/modules/cart'
import { CloseOutline, MoreOutline, SearchOutline, RightOutline } from 'antd-mobile-icons'
import axios from 'axios'
import '../../static/Not_used/Not_used.css'
axios.defaults.baseURL = 'http://127.0.0.1:3000'
export default function Not_used() {
    const [num, setNum] = useState('')
    const [price, setPrice] = useState('')
    const [co_id, setCo_id] = useState('')
    const [title, setTitle] = useState('')
    const navigate = useNavigate()
    const dispatch = useDispatch()
    const Track = useSelector((store) => store.cart.orderTrack)
    console.log(Track);

    const [params] = useSearchParams()
    const id = params.get('id')
    const back = () => {
        navigate(-1)
    }
    const getList = async () => {
        await axios.get(`/OrderRouter/OrderList?id=${id}`).then(res => {
            setNum(res.data.num)
            setCo_id(res.data.or_id)
            setPrice(res.data.price)
            setTitle(res.data.title)
        })
    }
    useEffect(() => {
        getList()
    }, [])
    const handleClick = () => {
        axios.get(`/OrderRouter/use?id=${id}`).then(res => {
            if (res.data.code == '200') {
                dispatch(addTrack('2'))
                if (Track == '2') {
                    navigate('/order')
                }
            }
        })
    }
    return (
        <div className='Not_used_box'>
            <div className='Not_used_title'>
                <NavBar onBack={back} >
                    订单详情
                </NavBar>
            </div>
            <div className='Not_used_title'>
                <div>
                    <h1> 未使用<RightOutline /></h1>
                </div>
            </div>
            <div className='Not_used_main'>
                <div className='Not_used_abs'>
                    <div className='Not_used_abs_title'>
                        <div style={{ display: "flex" }}>
                            <img src="/img/对号-copy.png" alt="" width='20px' height='20px' />
                            <span>随买随用</span>
                        </div>
                        <div style={{ display: "flex" }}>
                            <img src="/img/对号-copy.png" alt="" width='20px' height='20px' />
                            <span>随时退</span>
                        </div>
                        <div style={{ display: "flex" }}>
                            <img src="/img/对号-copy.png" alt="" width='20px' height='20px' />
                            <span>过期退</span>
                        </div>
                    </div>

                    <div className='pending_button'>
                        <Button style={{ width: '10rem', border: '5px block solid' }} onClick={() => navigate(`/unsubscribe?id=${id}`)}   >退订</Button>
                    </div>
                </div>

                <div className='Not_usedMain'>
                    <div className='Not_usedWen'>
                        <span style={{ fontSize: '2rem' }}>{title} X {num}份</span>
                    </div>
                    <div>
                        <p style={{ fontSize: '2.2rem', fontWeight: '500', margin: '2rem 3rem' }} >凭[电子凭证]直接验证使用</p>
                    </div>
                    <div className='Not_used_QRCode'>
                        <div className='QRCode_Title'>
                            <p style={{width:"2rem",margin:'8rem 1rem'}}>使用凭证</p>
                        </div>
                        <div className='QRCode'>
                            <div style={{ marginTop: '5rem' ,marginLeft:'8rem'}}>
                                <QRCode
                                    errorLevel="H"
                                    value="聂润泽"
                                    onClick={() => handleClick()}
                                />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    )
}
